<template>
  <div id="SearchTalent">
    <el-row>
      <el-col :span="ContentSpan" :offset="ContentOffset">
        <el-row class="searchList">
          <el-col :span="24">
            <el-row :gutter="20" class="input">
              <el-col :span="3" :offset="2" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">简历名称：</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px;padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-input v-model="Selectlist.name" placeholder="请输入简历名称"></el-input>
                </div>
              </el-col>
              <el-col :span="3" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">工作性质：</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.workType" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[5].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">工薪要求:</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.salary" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[2].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="input">
              <el-col :span="3" :offset="2" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">学历要求:</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.education" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[1].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">工作经验：</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.workYears" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[0].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">性别：</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.sex" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[3].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="input" v-if="m===true">
              <el-col :span="3" :offset="2" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">政治面貌：</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.political" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[7].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3" style="padding-right:0px;padding-top:0.5em;">
                <div class="grid-content bg-purple">
                  <span class="searchTitle">婚姻状况：</span>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left:0px; padding-right:0px;">
                <div class="grid-content bg-purple">
                  <el-select v-model="Selectlist.marriage" filterable placeholder="请选择">
                    <el-option v-for="(item,index)  in selectlistJosn[1].list[6].list" :key="item.val"
                               :label="item.name" :value="item.val"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="input">
              <el-col :span="4" :offset="6">
                <div class="grid-content bg-purple">
                  <el-button type="info" style="width:100%" @click="getWorkList(1)">搜人才</el-button>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-button type="text" v-if="m===true" @click="display()">{{displayLess}}</el-button>
                  <el-button type="text" v-else @click="display()">{{displayMore}}</el-button>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <el-button type="text" @click="resetForm()">重置搜索条件</el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="searchResult">
            <h2>{{searchResult}}</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div :style="{'margin-top':'1em'}">
              <el-table :data="TalentList" style="width: 100%" fit border :row-style="{'height':'1em'}"
                        @row-dblclick="viewDetails">
                <el-table-column prop="name" label="简历名称" align="center">
                  <template slot-scope="scope">
                    <span class="resume-title-name" @click="viewDetails(scope.row,{})"><b>{{ scope.row.name
                      }}</b></span>
                  </template>
                </el-table-column>
                <el-table-column prop="work_years" label="工作经验/年" align="center"></el-table-column>
                <el-table-column prop="sex" label="性别" :formatter="formatterSex" align="center"></el-table-column>
                <el-table-column prop="end_education" label="最高学历" :formatter="formatterendEdu"
                                 align="center"></el-table-column>
                <el-table-column prop="upstring_time" label="更新时间" :formatter="formatterDate"
                                 align="center"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                       :page-size="10" class="page-no-style"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import Data from '../../assets/file/searchJob.json'

  export default {
    name: 'SearchTalent',
    data () {
      return {
        ContentSpan: 0,
        ContentOffset: 0,
        m: false,
        searchBtu: '精确查找',
        searchResult: '搜索结果',
        TalentList: [],
        page_no: 1,
        total: 0,
        Value: '',
        Selectlist: {
          education: '',
          workYears: '',
          sex: '',
          upstringTime: '',
          workType: '',
          marriage: '',
          political: '',
          salary: '',
          name: ''
        },
        currentId: '',
        selectlistJosn: [],
        searchjobVal: '',
        input: '',
        workPlace: ['', '', ''],
        nativePlace: ['', '', ''],
        living: ['', '', ''],
        displayMore: '展开更多搜索条件',
        displayLess: '收起更多搜索条件',
        positonList: [],
        Workname: '',
      }
    },
    created () {
      this.getWorkList(1)
      this.selectlistJosn = Data
      this.ContentSpan = this.$store.state.Resolution
      this.ContentOffset = this.$store.state.ContentOffset
    },
    methods: {
      getWorkList (pageNum) {
        let _this = this
        let worklist = new Object()
        worklist.work_years = _this.Selectlist.workYears,
          worklist.education = _this.Selectlist.education,
          worklist.salary = _this.Selectlist.salary,
          worklist.sex = _this.Selectlist.sex,
          worklist.upstring_time = _this.Selectlist.upstringTime
        if (_this.Selectlist.name !== '') {
          worklist.name = _this.Selectlist.name
        }
        worklist.work_place = this.changPlaceStyle(_this.workPlace),
          worklist.living = this.changPlaceStyle(_this.living),
          worklist.native_place = this.changPlaceStyle(_this.nativePlace),
          worklist.work_type = _this.Selectlist.workType,
          worklist.marriage = _this.Selectlist.marriage,
          worklist.political = _this.Selectlist.political,
          worklist.page_no = pageNum
        worklist.page_size = 10,
          postDataToServer('HM_RESUME_TALENTS_LIST', worklist).then(function (data) {
            if (data.status === 0) {
              _this.TalentList = data.data_list
              _this.total = data.total_results
            }
          })
      },
      //查看简历详情
      viewDetails (row, event) {
        this.$router.push({path: '/talentdetail/' + row.id})
      },
      changPlaceStyle (palce) {
        let m = palce[0] + '/' + palce[1] + '/' + palce[2]
        if (m != '//') {
          return m
        } else {
          m = ''
          return m
        }
      },
      display () {
        if (this.m) {
          this.m = false
        } else {
          this.m = true
        }
      },
      //重置
      resetForm () {
        this.$router.go(0)
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      formatterDate (row, column) {
        return formatterTime('MM月dd日', row.upstring_time)
      },
      formatterendEdu (row, column) {
        return getStaticMapList('education', row.end_education)
      },
      formatterSex (row, column) {
        return getStaticMapList('sex', row.sex)
      },
      forworkExperience (row, column) {
        return getStaticMapList('work_experience', row.work_experience)
      }
    },
    watch: {
      page_no (val, oldVal) {
        this.getWorkList(val)
      }
    }
  }
</script>
<style scoped>
  /*查询条件样式*/
  .searchList {
    margin-top: 1em;
    background-color: #f7f7f7;
    box-shadow: 2px 2px 10px #cccccc;
    padding-bottom: 1em;
  }

  .searchTitle {
    font-size: 1em;
    font-weight: bold;
  }

  .input {
    margin-left: 0em;
    margin-right: 0em;
    margin-top: 1em;
  }

  .searchResult {
    margin-top: 1em;
    border-left: 10px solid #165aac;
    border-bottom: 1px solid #165aac;
    text-align: center;
  }

  .searchResult h2 {
    font-size: 1em;
    margin: 5px;
  }

  /*简历卡片样式*/

  /*表格第一列链接的样式*/
  .resume-title-name {
    color: #4899eb;
  }

  .resume-title-name:hover {
    text-decoration: underline;
    color: #ff5e38;
    cursor: pointer;
  }
</style>
